<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item> <i class="el-icon-setting"></i> 门店管理 </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-button v-if="threeLevelsbool.add" type="primary" class="handle-del mr10" @click="addTable">新增</el-button>
        <!-- <el-button type="primary" icon="el-icon-delete" class="handle-del mr10" @click="delAllSelection">批量删除</el-button> -->
        <el-input v-model="query.kw" placeholder="用户名" class="handle-input mr10"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="getData">搜索</el-button>
      </div>
      <el-table v-loading="loading" :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header"
                @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column type="index" :index="tableIndex" width="55" label="序号" align="center"></el-table-column>
        <el-table-column prop="userName" label="用户名"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column label="电话">
          <template slot-scope="scope">{{ scope.row.phone }}</template>
        </el-table-column>
        <el-table-column prop="validTime" label="有效期至"></el-table-column>
        <el-table-column prop="createTime" label="录入时间" width="200"></el-table-column>
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === '0' ? 'success' : 'danger'">{{ scope.row.status === '0'?'启用':'停用' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button v-if="threeLevelsbool.edit" type="text" icon="el-icon-edit" @click="handleEdit(scope.row.id)">编辑</el-button>
            <el-button type="text" icon="el-icon-link" @click="wxClickBtn(scope.row.id)">企业微信信息</el-button>
            <!-- <el-button v-if="threeLevelsbool.remove" type="text" icon="el-icon-delete" class="red" @click="handleDelete(scope.$index, scope.row)">删除 -->
            <!-- </el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination background layout="total, prev, pager, next" :current-page="query.page" :page-size="query.limit" :total="totalCount"
                       :pager-count="5" @current-change="handlePageChange" @prev-click="handlePageChange" @next-click="handlePageChange">
        </el-pagination>
      </div>
    </div>

    <!-- 编辑弹出框 -->
    <el-dialog title="基本信息" :visible.sync="editVisible" width="30%" :close-on-click-modal="false">
      <el-form :rules="rules" :model="form" ref="form" label-width="120px" v-loading="addloading">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="form.userName"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input type="number" v-model="form.phone"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pwd">
          <el-input type="password" v-model="form.pwd" :show-password="true"></el-input>
        </el-form-item>
        <el-form-item label="公司名称" prop="companyName">
          <el-input v-model="form.companyName"></el-input>
        </el-form-item>
        <el-form-item label="公司地址" prop="companyAddress">
          <el-input v-model="form.companyAddress"></el-input>
        </el-form-item>
        <el-form-item label="所属地区">
          <el-cascader v-model="citySelected" :options="cityData" @change="handleChange" style="width:100%;"></el-cascader>
        </el-form-item>
        <el-form-item label="使用人数" prop="userCount">
          <el-input type="number" v-model="form.userCount"></el-input>
        </el-form-item>
        <el-form-item label="云呼坐席" prop="storeSeatsNum">
          <el-input type="number" v-model="form.storeSeatsNum" @change="yuntelNum"></el-input>
        </el-form-item>
        <el-form-item label="有效期至" prop="validTime">
          <el-date-picker type="date" placeholder="选择日期" v-model="form.validTime" format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 100%;">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="ip白名单" prop="ipList">
          <el-input type="textarea" :autosize="{ minRows:4, maxRows:8}" v-model="form.ipList" placeholder="请输入ip地址,多个ip用换行区分" :rows="3"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio label="0">启用</el-radio>
            <el-radio label="1">停用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="ip限制" prop="statusFlg">
          <el-radio-group v-model="form.statusFlg">
            <el-radio label="1">启用</el-radio>
            <el-radio label="0">停用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveEditAdd('form',editID)">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 绑定企业微信列表 -->
    <el-drawer :with-header="false" :visible.sync="wxListFlg" size="50%">
      <el-button type="primary" icon="el-icon-plus" style="margin:10px 20px;" @click="wxListAdd">添加企业微信</el-button>

      <el-collapse v-model="wxListActive" accordion style="margin:0 20px;">
        <el-collapse-item v-for="(item,i) in wxObjList" :name="i">
          <template slot="title">
            <i class="header-icon el-icon-office-building" style="margin-right:5px"></i> {{item.wiName}}
          </template>
          <el-card class="cardWxList">
            <p class="title">企业微信appid</p>
            <ul>
              <li>
                <span class="left">appid：</span>
                <span class="text">{{item.wiAppid}}</span>
                <el-link :underline="false" type="primary" class="copytext" :data-clipboard-text="item.wiAppid" @click="copy('.copytext')">复制
                </el-link>
              </li>
            </ul>
          </el-card>
          <el-card class="cardWxList">
            <p class="title">通讯录同步</p>
            <ul>
              <li>
                <span class="left">secret：</span>
                <span class="text">{{item.mailSecret}}</span>
                <el-link :underline="false" type="primary" class="copytext" :data-clipboard-text="item.mailSecret" @click="copy('.copytext')">复制
                </el-link>
              </li>
              <li>
                <span class="left">token：</span>
                <span class="text">{{item.mailToken}}</span>
                <el-link :underline="false" type="primary" class="copytext" :data-clipboard-text="item.mailToken" @click="copy('.copytext')">复制
                </el-link>
              </li>
              <li>
                <span class="left">AECkey：</span>
                <span class="text">{{item.mailAecKey}}</span>
                <el-link :underline="false" type="primary" class="copytext" :data-clipboard-text="item.mailAecKey" @click="copy('.copytext')">复制
                </el-link>
              </li>
              <li>
                <span class="left">callback：</span>
                <span class="text">{{item.mailCallBack}}</span>
                <el-link :underline="false" type="primary" class="copytext" :data-clipboard-text="item.mailCallBack" @click="copy('.copytext')">复制
                </el-link>
              </li>
            </ul>
          </el-card>
          <el-card class="cardWxList">
            <p class="title">客户联系</p>
            <ul>
              <li>
                <span class="left">secret：</span>
                <span class="text">{{item.cusSecret}}</span>
                <el-link :underline="false" type="primary" class="copytext" :data-clipboard-text="item.cusSecret" @click="copy('.copytext')">复制
                </el-link>
              </li>
              <li>
                <span class="left">token：</span>
                <span class="text">{{item.cusToken}}</span>
                <el-link :underline="false" type="primary" class="copytext" :data-clipboard-text="item.cusToken" @click="copy('.copytext')">复制
                </el-link>
              </li>
              <li>
                <span class="left">AECkey：</span>
                <span class="text">{{item.cusAecKey}}</span>
                <el-link :underline="false" type="primary" class="copytext" :data-clipboard-text="item.cusAecKey" @click="copy('.copytext')">复制
                </el-link>
              </li>
              <li>
                <span class="left">callback：</span>
                <span class="text">{{item.cusCallBack}}</span>
                <el-link :underline="false" type="primary" class="copytext" :data-clipboard-text="item.cusCallBack" @click="copy('.copytext')">复制
                </el-link>
              </li>
            </ul>
          </el-card>
          <el-card class="cardWxList">
            <p class="title">会话内容存档</p>
            <ul>
              <li>
                <span class="left">secret：</span>
                <span class="text">{{item.meetingSecret}}</span>
                <el-link :underline="false" type="primary" class="copytext" :data-clipboard-text="item.meetingSecret" @click="copy('.copytext')">复制
                </el-link>
              </li>
              <li>
                <span class="left">token：</span>
                <span class="text">{{item.meetingToken}}</span>
                <el-link :underline="false" type="primary" class="copytext" :data-clipboard-text="item.meetingToken" @click="copy('.copytext')">复制
                </el-link>
              </li>
              <li>
                <span class="left">AECkey：</span>
                <span class="text">{{item.meetingAecKey}}</span>
                <el-link :underline="false" type="primary" class="copytext" :data-clipboard-text="item.meetingAecKey" @click="copy('.copytext')">复制
                </el-link>
              </li>
              <li>
                <span class="left">callback：</span>
                <span class="text">{{item.meetingCallBack}}</span>
                <el-link :underline="false" type="primary" class="copytext" :data-clipboard-text="item.meetingCallBack" @click="copy('.copytext')">复制
                </el-link>
              </li>
              <li>
                <span class="left">公钥：</span>
                <span class="text">{{item.meetingPubKey}}</span>
                <el-link :underline="false" type="primary" class="copytext" :data-clipboard-text="item.meetingPubKey" @click="copy('.copytext')">复制
                </el-link>
              </li>
            </ul>
          </el-card>
          <el-button type="danger" icon="el-icon-edit" @click="wxListEdit(item)">修改</el-button>
        </el-collapse-item>
      </el-collapse>
    </el-drawer>
    <!-- 绑定企业微信 -->
    <el-dialog title="绑定企业微信" :visible.sync="wxFlg" width="60%" :close-on-click-modal="false">
      <el-form label-width="125px">
        <el-form-item label="企业名称">
          <el-input v-model="wxObj.wiName"></el-input>
        </el-form-item>
        <el-form-item label="企业微信appid">
          <el-input v-model="wxObj.wiAppid"></el-input>
        </el-form-item>
      </el-form>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card>
            <div class="box-card">
              <img src="../../../assets/img/tongxun.svg" alt="">
              <div class="wxText">
                <p>通讯录同步</p>
                <span>可通过API接口管理通讯录，同时可设置查看或编辑权限，管理更加方便</span>
              </div>
              <div class="wxkaiguan">
                <el-switch v-model="wxObj.mailIsOpen" active-value="1" active-color="#13ce66" inactive-value="0" inactive-color="#ff4949">
                </el-switch>
              </div>
            </div>
            <el-form label-width="80px">
              <el-form-item label="secret">
                <el-input placeholder="请输入secret" v-model="wxObj.mailSecret"></el-input>
              </el-form-item>
              <el-form-item label="token">
                <el-input placeholder="请输入token" v-model="wxObj.mailToken"></el-input>
              </el-form-item>
              <el-form-item label="AECkey">
                <el-input placeholder="请输入AECkey" v-model="wxObj.mailAecKey"></el-input>
              </el-form-item>
              <el-form-item label="callback">
                <el-input readonly placeholder="请输入回调地址" v-model="wxObj.mailCallBack"></el-input>
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card>
            <div class="box-card">
              <img src="../../../assets/img/tongxun.svg" alt="">
              <div class="wxText">
                <p>客户联系</p>
                <span>可通过API接口管理客户列表，同时可设置查看或编辑权限，管理更加方便</span>
              </div>
              <div class="wxkaiguan">
                <el-switch v-model="wxObj.cusIsOpen" active-value="1" active-color="#13ce66" inactive-value="0" inactive-color="#ff4949">
                </el-switch>
              </div>
            </div>
            <el-form label-width="80px">
              <el-form-item label="secret">
                <el-input placeholder="请输入secret" v-model="wxObj.cusSecret"></el-input>
              </el-form-item>
              <el-form-item label="token">
                <el-input placeholder="请输入token" v-model="wxObj.cusToken"></el-input>
              </el-form-item>
              <el-form-item label="AECkey">
                <el-input placeholder="请输入AECkey" v-model="wxObj.cusAecKey"></el-input>
              </el-form-item>
              <el-form-item label="callback">
                <el-input readonly placeholder="请输入回调地址" v-model="wxObj.cusCallBack"></el-input>
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>
        <el-col :span="12" style="margin-top:10px;">
          <el-card>
            <div class="box-card">
              <img src="../../../assets/img/huihua.svg" alt="">
              <div class="wxText">
                <p>会话内容存档</p>
                <span>企业可通过API获取成员的客户服务会话内容，以满足企业管理客户服务质量</span>
              </div>
              <div class="wxkaiguan">
                <el-switch v-model="wxObj.meetingIsOpen" active-value="1" active-color="#13ce66" inactive-value="0" inactive-color="#ff4949">
                </el-switch>
              </div>
            </div>
            <el-form label-width="80px">
              <el-form-item label="secret">
                <el-input placeholder="请输入secret" v-model="wxObj.meetingSecret"></el-input>
              </el-form-item>
              <el-form-item label="token">
                <el-input placeholder="请输入token" v-model="wxObj.meetingToken"></el-input>
              </el-form-item>
              <el-form-item label="AECkey">
                <el-input placeholder="请输入AECkey" v-model="wxObj.meetingAecKey"></el-input>
              </el-form-item>
              <el-form-item label="callback">
                <el-input readonly placeholder="请输入回调地址" v-model="wxObj.meetingCallBack"></el-input>
              </el-form-item>
              <el-form-item label="公钥">
                <el-input readonly type="textarea" autosize placeholder="请输入公钥" v-model="wxObj.meetingPubKey">
                </el-input>
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="wxFlg = false">取 消</el-button>
        <el-button type="primary" @click="wxEditSubClick" :loading="wxload">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  UserAjax,
  UserFormAjaxSub,
  PersonnelIdentity,
  UserFormEditAjaxInit,
  UserFormEditAjaxSub,
  UserFormInitwx,
  UserFormSubwx,
  RolePermissionsQX
} from '../../../api/index';
import Storage from '../../../utils/localStorage';
import CITYARRDATA from '../../../utils/city';
import copytext from '../../../utils/clickCopy';
export default {
  data() {
    return {
      editVisible: false,
      loading: true,
      query: {
        page: 1,
        limit: 10,
        kw: ''
      },
      tableData: [],
      totalCount: 0,
      totalPage: 0,

      addloading: false,
      editID: "",
      form: {
        name: "",
        userName: "",
        phone: "",
        pwd: "",
        companyName: '',
        companyAddress: '',
        tProvince: '',
        tCity: '',
        userCount: '',
        storeSeatsNum: '',
        validTime: "",
        ipList: "",
        status: "0",
        statusFlg: "1",
      },
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        userName: [
          { required: true, message: '请输入用户名称', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入电话', trigger: 'blur' }
        ],
        pwd: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        companyName: [
          { required: true, message: '请输入公司名称', trigger: 'blur' }
        ],
        companyAddress: [
          { required: true, message: '请输入公司地址', trigger: 'blur' }
        ],
        userCount: [
          { required: true, message: '请输入用户数量', trigger: 'blur' }
        ],
        validTime: [
          { required: true, message: '请选择有效期至', trigger: 'change' }
        ],
        // ipList: [
        //   { required: true, message: '请输入用户名称', trigger: 'blur' }
        // ],
        status: [
          { required: true, message: '请选择状态', trigger: 'change' }
        ],
        statusFlg: [
          { required: true, message: '请选择ip限制', trigger: 'change' }
        ]
      },

      multipleSelection: [],

      citySelected: [],
      cityData: [],

      // 绑定企业微信列表
      wxListFlg: false,
      wxListActive: "",
      wxUserId: '',
      wxObjList: [],

      // 绑定企业微信
      wxFlg: false,
      wxload: false,
      wxObj: {},


      threeLevelsbool: {
        add: false,
        edit: false,
        remove: false,
      }
    };
  },
  created() {
    this.threeLevels();
    this.getData();
    this.cityData = CITYARRDATA;
  },
  watch: {
    "$route": "getData",
    //关闭弹窗清除编辑状态
    editVisible: function(n) {
      if (!n) {
        this.editID = "";
      }
    }
  },
  methods: {
    // 获取 easy-mock 的模拟数据
    getData() {
      UserAjax(this.query).then((res) => {
        this.loading = false;
        if (res.code === 0) {
          this.tableData = res.userList;
          this.totalCount = res.totalCount;
          this.totalPage = res.totalPage;
        } else {
          this.$message(res.msg)
        }
      });
    },
    //序号
    tableIndex(index) {
      return (this.query.page - 1) * this.query.limit + index + 1
    },
    // 分页切换
    handlePageChange(val) {
      this.loading = true;
      this.$set(this.query, 'page', val);
      this.getData();
    },
    //点击复制
    copy(item) {
      copytext(item);
    },
    //新增操作
    addTable() {
      this.editVisible = true;
    },
    //新增编辑提交前验证
    saveEditAdd(formName, id) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.addloading = true;
          if (id) {
            this.handleEditSub(id)
          } else {
            this.saveEditAddSub();
          }
        } else {
          // console.log(res.msg);
          return false;
        }
      });
    },
    //编辑查询
    handleEdit(id) {
      this.addTable();
      this.addloading = true;
      this.editID = id;
      UserFormEditAjaxInit({ userId: id }).then(res => {
        if (res.code === 0) {
          this.addloading = false;
          this.form.teamid = res.team.id;
          this.form.userid = res.user.id;
          this.form.name = res.user.name;
          this.form.userName = res.user.userName;
          this.form.phone = res.user.phone;
          this.form.pwd = res.user.pwd;
          this.form.validTime = res.user.validTime;
          this.form.status = res.user.status;
          this.form.storeSeatsNum = res.user.storeSeatsNum;
          this.form.ipList = res.team.tIp;
          this.form.userCount = res.team.userCount;
          this.form.companyName = res.team.name;
          this.form.companyAddress = res.team.tAddress;
          this.form.tProvince = res.team.tProvince;
          this.form.tCity = res.team.tCity;
          this.form.statusFlg = res.team.tIsPrivate;
          this.citySelected = [res.team.tProvince, res.team.tCity];
        } else {
          this.$message(res.msg);
        }
      });
    },
    // 新增提交
    saveEditAddSub() {
      let obj = {
        "user": {
          "userName": this.form.userName,
          "name": this.form.name,
          "phone": this.form.phone,
          "pwd": this.form.pwd,
          "status": this.form.status,
          "storeSeatsNum": this.form.storeSeatsNum,
          "validTime": this.form.validTime
        },
        "team": {
          "name": this.form.companyName,
          "tProvince": this.form.tProvince,
          "tCity": this.form.tCity,
          "userCount": this.form.userCount,
          "tAddress": this.form.companyAddress,
          "tIp": this.form.ipList,
          "tIsPrivate": this.form.statusFlg,
        }
      }
      UserFormAjaxSub(obj).then((res) => {
        this.addloading = false;
        if (res.code === 0) {
          this.loading = true;
          this.editVisible = false;
          this.$message.success("新增成功");
          this.getData();
        } else {
          this.$message(res.msg);
        }
      });
    },
    //编辑提交
    handleEditSub(id) {
      let obj = {
        "user": {
          "userName": this.form.userName,
          "name": this.form.name,
          "phone": this.form.phone,
          "pwd": this.form.pwd,
          "status": this.form.status,
          "validTime": this.form.validTime,
          "storeSeatsNum": this.form.storeSeatsNum,
          "id": this.form.userid
        },
        "team": {
          "name": this.form.companyName,
          "tProvince": this.form.tProvince,
          "tCity": this.form.tCity,
          "userCount": this.form.userCount,
          "tAddress": this.form.companyAddress,
          "tIp": this.form.ipList,
          "id": this.form.teamid,
          "tIsPrivate": this.form.statusFlg,
        }
      }
      UserFormEditAjaxSub(obj).then((res) => {
        this.addloading = false;
        if (res.code === 0) {
          this.loading = true;
          this.editVisible = false;
          //如果是当前账号，掉线重新登陆
          if (res.isOut) {
            this.$message("账号信息已变更，请重新登陆");
            Storage.removeItem('username');
            Storage.removeItem('token');
            this.$router.push('/login');
          } else {
            this.$message.success("编辑成功");
          }
          this.getData();
        } else {
          this.$message(res.msg);
        }
      });
    },
    //选中所属地区
    handleChange(val) {
      this.form.tProvince = val[0];
      this.form.tCity = val[1];
    },
    //云呼坐席
    yuntelNum(ev) {
      if (Number(ev) >= Number(this.form.userCount)) {
        this.$message("坐席数量不能超过使用人数");
        this.form.storeSeatsNum = 0;
      }
    },
    //点击企业微信查看列表
    wxClickBtn(id) {
      this.wxUserId = id;
      this.wxListFlg = true;
      this.wxEditClick();
    },
    //点击新增绑定企业微信
    wxListAdd() {
      this.wxFlg = true;
      this.wxObj = {};
    },
    //点击修改绑定企业微信
    wxListEdit(item) {
      this.wxFlg = true;
      this.wxObj = item;
    },
    //点击列表企业微信
    wxEditClick() {
      UserFormInitwx({
        storeId: this.wxUserId
      }).then(res => {
        if (res.code == 0) {
          res.info.map((item, i) => {
            item.mailIsOpen = String(item.mailIsOpen);
            item.meetingIsOpen = String(item.meetingIsOpen);
            item.cusIsOpen = String(item.cusIsOpen);
          })
          this.wxObjList = res.info;
        } else {
          this.$message(res.msg);
        }
      })
    },
    //提交企业微信内容
    wxEditSubClick() {
      this.wxload = true;
      this.wxObj.storeId = this.wxUserId;
      UserFormSubwx(this.wxObj).then(res => {
        this.wxload = false;
        if (res.code == 0) {
          this.$message.success("提交成功");
          this.wxFlg = false;
          this.wxEditClick();
        } else {
          this.$message(res.msg);
        }
      })
    },
    //三级权限
    threeLevels() {
      let parentRouth = this.$route.path.replace('/', '');
      RolePermissionsQX({ urlName: parentRouth }).then(res => {
        if (res.code === 0) {
          res.buttons.forEach((item, i) => {
            switch (item.name) {
              case "新增": this.threeLevelsbool.add = item.pageIsShow; break;
              case "编辑": this.threeLevelsbool.edit = item.pageIsShow; break;
              case "删除": this.threeLevelsbool.remove = item.pageIsShow; break;
            }
          })
        } else {
          this.$message(res.msg);
        }
      });
    },
    // 多选操作
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

  }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
.el-select {
    width: 100%;
}
.box-card {
    display: flex;
    margin-bottom: 10px;
}
.wxText {
    margin-left: 10px;
    padding-right: 10px;
}
.wxText span {
    font-size: 12px;
    color: #999;
}
.wxkaiguan {
    line-height: 60px;
}
.wxkeyInput .el-input {
    margin-bottom: 5px;
}
.cardWxList {
    margin-bottom: 10px;
}
.cardWxList .title {
    font-size: 14px;
    font-weight: bold;
}
.cardWxList .left {
    font-size: 13px;
    margin-right: 10px;
}
.cardWxList .text {
    font-size: 13px;
    color: #ccc;
}
.cardWxList li .el-link {
    margin-left: 10px;
}
</style>
